<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="icon" href="assets/web_pc/favicon.ico" />
    <title>大象阅读</title>
    <link href="/cssweb/font.css" rel="stylesheet" />
    <link href="/cssweb/app.css" rel="stylesheet" />
    <script type="text/javascript" src="/jsweb/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/jsweb/app.js"></script>
  </head>
  <body>
    <div id="app">
      <div data-v-63f544da="" id="layout" class="layout layout-book-room">
        <div data-v-63f544da="" class="app_header app_bg">
          <div
            data-v-63f544da=""
            class="w1220 app_content flex flex-center relative m-center"
          >
            <div data-v-63f544da="" class="header-logo">
              <a
                data-v-63f544da=""
                href="index.html"
                class="router-link-exact-active router-link-active"
                aria-current="page"
                ><img
                  data-v-63f544da=""
                  src="https://novel-h5-ixcc.oss-cn-shanghai.aliyuncs.com/pc_logo.png"
                  class="w"
              /></a>
            </div>
            <div data-v-63f544da="" class="flex-1">
              <div data-v-63f544da="" class="nav">
                <a
                  href="index.html"
                  class="item router-link-exact-active router-link-active"
                  aria-current="page"
                  >首页</a
                ><a data-v-63f544da="" href="novel.html" class="item active"
                  >书库</a
                ><a data-v-63f544da="" href="charts.html" class="item"
                  >排行榜</a
                >
              </div>
            </div>
            <!-- <div data-v-63f544da="" class="flex flex-center">
              <div data-v-63f544da="" class="searchBox">
                <div
                  data-v-63f544da=""
                  class="el-input el-input--small el-input--suffix"
                >
                  <input
                    data-v-63f544da=""
                    type="text"
                    autocomplete="off"
                    placeholder="请输入书名或作者名"
                    class="el-input__inner"
                  /><span data-v-63f544da="" class="el-input__suffix"
                    ><span
                      data-v-63f544da=""
                      class="el-input__suffix-inner cursor"
                      ><i
                        data-v-63f544da=""
                        class="el-input__icon el-icon-search"
                      ></i></span
                  ></span>
                </div>
              </div>
              <div data-v-63f544da="" class="h_divider"></div>
              <div data-v-63f544da="" class="topLogin fs16 flex">
                <div data-v-63f544da="" class="flex flex-center">
                  <a data-v-63f544da="">登录</a>
                  <div data-v-63f544da="" class="h_divider"></div>
                  <a data-v-63f544da="">注册</a>
                </div>
              </div>
            </div> -->
          </div>
        </div>
        <div data-v-63f544da="" class="m-center clearfix main">
          <div
            data-v-70953f54=""
            data-v-63f544da=""
            class="w1220 wapper m-center"
          >
            <div data-v-70953f54="" class="home book_types_panel basebg">
              <div data-v-70953f54="" class="book_types_list">
                <div data-v-70953f54="" class="book_types flex mb17">
                  <div data-v-70953f54="" class="text-gray mr32">读者：</div>
                  <div data-v-70953f54="" class="flex-1">
                    <a data-v-70953f54="" class="item mr28 active">全部 </a
                    ><a data-v-70953f54="" class="item mr28">男生 </a
                    ><a data-v-70953f54="" class="item mr28">女生 </a>
                  </div>
                </div>
                <div data-v-70953f54="" class="book_types flex mb17">
                  <div data-v-70953f54="" class="text-gray mr32">状态：</div>
                  <div data-v-70953f54="" class="flex-1">
                    <a data-v-70953f54="" class="item mr28 active">全部</a
                    ><a data-v-70953f54="" class="item mr28">连载中</a
                    ><a data-v-70953f54="" class="item mr28">已完结</a>
                  </div>
                </div>
                <div data-v-70953f54="" class="book_types flex mb17">
                  <div data-v-70953f54="" class="text-gray mr32">分类：</div>
                  <div data-v-70953f54="" class="flex-1">
                    <a data-v-70953f54="" class="item mr28 active">全部</a
                    ><a data-v-70953f54="" class="item mr28 mb10">现代言情</a
                    ><a data-v-70953f54="" class="item mr28 mb10">古代言情</a
                    ><a data-v-70953f54="" class="item mr28 mb10">古代</a
                    ><a data-v-70953f54="" class="item mr28 mb10">科幻</a
                    ><a data-v-70953f54="" class="item mr28 mb10">仙侠</a
                    ><a data-v-70953f54="" class="item mr28 mb10">玄幻</a
                    ><a data-v-70953f54="" class="item mr28 mb10">武侠</a
                    ><a data-v-70953f54="" class="item mr28 mb10">历史</a
                    ><a data-v-70953f54="" class="item mr28 mb10">现实</a
                    ><a data-v-70953f54="" class="item mr28 mb10">军事</a
                    ><a data-v-70953f54="" class="item mr28 mb10">甜宠</a
                    ><a data-v-70953f54="" class="item mr28 mb10">脑洞</a
                    ><a data-v-70953f54="" class="item mr28 mb10">穿越</a
                    ><a data-v-70953f54="" class="item mr28 mb10">总裁</a
                    ><a data-v-70953f54="" class="item mr28 mb10">重生</a
                    ><a data-v-70953f54="" class="item mr28 mb10">糙汉</a
                    ><a data-v-70953f54="" class="item mr28 mb10">系统</a
                    ><a data-v-70953f54="" class="item mr28 mb10">架空</a
                    ><a data-v-70953f54="" class="item mr28 mb10">爽文</a
                    ><a data-v-70953f54="" class="item mr28 mb10">都市</a
                    ><a data-v-70953f54="" class="item mr28 mb10">反派</a
                    ><a data-v-70953f54="" class="item mr28 mb10">热血</a
                    ><a data-v-70953f54="" class="item mr28 mb10">杀伐果断</a
                    ><a data-v-70953f54="" class="item mr28 mb10">逆袭</a
                    ><a data-v-70953f54="" class="item mr28 mb10">青春文学</a
                    ><a data-v-70953f54="" class="item mr28 mb10">影视原著</a
                    ><a data-v-70953f54="" class="item mr28 mb10">悬疑</a
                    ><a data-v-70953f54="" class="item mr28 mb10">名著</a
                    ><a data-v-70953f54="" class="item mr28 mb10">红色文学</a
                    ><a data-v-70953f54="" class="item mr28 mb10">文学艺术</a
                    ><a data-v-70953f54="" class="item mr28 mb10">人文社科</a
                    ><a data-v-70953f54="" class="item mr28 mb10">少儿教育</a
                    ><a data-v-70953f54="" class="item mr28 mb10">经管励志</a>
                  </div>
                </div>
              </div>
              <div data-v-70953f54="" class="tabs">
                <div data-v-70953f54="" class="el-tabs el-tabs--top">
                  <div class="el-tabs__header is-top">
                    <div class="el-tabs__nav-wrap is-top">
                      <div class="el-tabs__nav-scroll">
                        <div
                          role="tablist"
                          class="el-tabs__nav is-top"
                          style="transform: translateX(0px)"
                        >
                          <!-- <div
                            class="el-tabs__active-bar is-top"
                            style="width: 28px; transform: translateX(0px)"
                          ></div> -->
                          <div
                            id="tab-hots"
                            aria-controls="pane-hots"
                            role="tab"
                            aria-selected="true"
                            tabindex="0"
                            class="el-tabs__item is-top is-active"
                          >
                            人气
                          </div>
                          <div
                            id="tab-likes"
                            aria-controls="pane-likes"
                            role="tab"
                            tabindex="-1"
                            class="el-tabs__item is-top"
                            style="padding-left: 20px"
                          >
                            收藏数
                          </div>
                          <div
                            id="tab-comments"
                            aria-controls="pane-comments"
                            role="tab"
                            tabindex="-1"
                            class="el-tabs__item is-top"
                            style="padding-right: 20px"
                          >
                            评论数
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="el-tabs__content">
                    <div
                      data-v-70953f54=""
                      role="tabpanel"
                      id="pane-hots"
                      aria-labelledby="tab-hots"
                      class="el-tab-pane"
                    ></div>
                    <div
                      data-v-70953f54=""
                      role="tabpanel"
                      aria-hidden="true"
                      id="pane-likes"
                      aria-labelledby="tab-likes"
                      class="el-tab-pane"
                      style="display: none"
                    ></div>
                    <div
                      data-v-70953f54=""
                      role="tabpanel"
                      aria-hidden="true"
                      id="pane-comments"
                      aria-labelledby="tab-comments"
                      class="el-tab-pane"
                      style="display: none"
                    ></div>
                  </div>
                </div>
              </div>
              <div
                data-v-70953f54=""
                class="mt10 flex home-hot-panel h clearfix"
              >
                <div data-v-70953f54="" class="flex flex-column flex-1 basebg">
                  <div data-v-70953f54="" class="home-hot flex">
                    <div
                      data-v-70953f54=""
                      class="home-hot-book flex-1 flex"
                      id="hot-books-container"
                    >
                      <!-- 这里的内容将通过JavaScript动态渲染 -->
                    </div>
                  </div>
                  <!-- 添加分页组件 -->
                  <div data-v-70953f54="" class="mt30">
                    <div
                      data-v-70953f54=""
                      class="flex flex-center el-pagination is-background"
                    >
                      <button
                        type="button"
                        disabled="disabled"
                        class="btn-prev"
                      >
                        <i class="el-icon el-icon-arrow-left"></i>
                      </button>
                      <ul class="el-pager">
                        <li class="number active">1</li>
                        <li class="number">2</li>
                        <li class="number">3</li>
                      </ul>
                      <button type="button" class="btn-next">
                        <i class="el-icon el-icon-arrow-rightw"></i>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-v-63f544da="" class="userLogPane">
          <div data-v-5e3980fe="" data-v-63f544da="">
            <!---->
            <div
              data-v-5e3980fe=""
              class="userLogPanelBox text-center flex flex-center"
            >
              <div data-v-5e3980fe="" class="modal-content modal-inner">
                <div data-v-5e3980fe="" class="modal">
                  <div data-v-5e3980fe="" class="close flex flex-center f14">
                    <span data-v-5e3980fe="" class="el-icon-close"></span>
                  </div>
                  <div data-v-5e3980fe="" class="title loginTitle flex">
                    <div data-v-5e3980fe="" class="item active">手机登录</div>
                    <div data-v-5e3980fe="" class="item">密码登录</div>
                  </div>
                  <!----><!---->
                  <div data-v-5e3980fe="" class="content">
                    <div data-v-5e3980fe="" class="form-input mb12 relative">
                      <div data-v-5e3980fe="" class="el-input">
                        <input
                          data-v-5e3980fe=""
                          type="text"
                          placeholder="请输入手机号"
                          class="el-input__inner"
                        />
                      </div>
                    </div>
                    <div data-v-5e3980fe="" class="form-input mb12 relative">
                      <div data-v-5e3980fe="" class="el-input">
                        <input
                          data-v-5e3980fe=""
                          type="text"
                          placeholder="请输入验证码"
                          maxlength="6"
                          class="el-input__inner"
                        />
                      </div>
                      <!---->
                      <div data-v-5e3980fe="" class="getcode">
                        <!----><!---->
                        <div data-v-5e3980fe="">获取验证码</div>
                      </div>
                      <!---->
                    </div>
                    <div
                      data-v-5e3980fe=""
                      class="text-left userBot fs12 text-gray"
                    >
                      登录即同意<a data-v-5e3980fe="" class="text-black"
                        >用户协议</a
                      >和<a data-v-5e3980fe="" class="text-black">隐私政策</a>
                    </div>
                    <div data-v-5e3980fe="" class="mt5">
                      <button
                        data-v-5e3980fe=""
                        type="button"
                        class="el-button w el-button--orange"
                      >
                        <!----><!----><span>登陆</span>
                      </button>
                    </div>
                  </div>
                  <!----><!---->
                  <div
                    data-v-5e3980fe=""
                    class="text-left doReg fs12 text-gray flex flex-start"
                  >
                    <a data-v-5e3980fe="">立即注册</a
                    ><!---->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-v-63f544da="" class="float-wrapper">
          <div data-v-63f544da="" class="bar bar-app">
            <div data-v-63f544da="" class="bar-content">
              <div
                data-v-63f544da=""
                class="bar-content-bg bar-content-bg-app"
              ></div>
              <div data-v-63f544da="" class="bar-content-text text-center fs12">
                大象阅读
              </div>
            </div>
            <div data-v-63f544da="" class="bar-qrcode">
              <img
                data-v-63f544da=""
                src="https://novel-ixcc.oss-cn-shanghai.aliyuncs.com/wx.jpg"
              />
            </div>
          </div>
        </div>
        <!---->
      </div>
    </div>

    <script>
      $(document).ready(function () {
        // 当前选中的分类和排序参数
        let currentParams = {
          page: 1,
          pageSize: 15,
          cateids: [], //
          issex: -1, //
          iswz: "-1", //
          orderBy: "hots", // 默认按人气排序
        };
        // 为读者分类添加点击效果
        $(".book_types:first-child .item").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          const issex = $(this).text().trim();
          // 根据文本内容设置对应的性别参数
          switch (issex) {
            case "男生":
              currentParams.issex = "1";
              break;
            case "女生":
              currentParams.issex = "2";
              break;
            default:
              currentParams.issex = "-1"; // 全部
          }
          fetchBooks();
        });

        // 为状态分类添加点击效果
        $(".book_types:nth-child(2) .item").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          const iswz = $(this).text().trim();
          // 根据文本内容设置对应的状态参数
          switch (iswz) {
            case "连载中":
              currentParams.iswz = "1";
              break;
            case "已完结":
              currentParams.iswz = "2";
              break;
            default:
              currentParams.iswz = "-1"; // 全部
          }
          fetchBooks();
        });

        // 为分类添加点击效果
        $(".book_types:last-child .item").click(function () {
          $(this).addClass("active").siblings().removeClass("active");
          const category = $(this).text().trim();

          // 重置cateids数组
          currentParams.cateids = [];

          // 如果不是"全部"，则添加对应的分类ID
          if (category !== "全部") {
            // 这里需要根据实际的分类ID映射来设置
            // 示例：假设每个分类都有对应的ID
            const categoryIdMap = {
              现代言情: 1,
              古代言情: 2,
              古代: 3,
              科幻: 4,
              仙侠: 5,
              玄幻: 6,
              武侠: 7,
              历史: 8,
              现实: 9,
              军事: 10,
              甜宠: 11,
              脑洞: 12,
              穿越: 13,
              总裁: 14,
              重生: 15,
              糙汉: 16,
              系统: 17,
              架空: 18,
              爽文: 19,
              都市: 20,
              反派: 21,
              热血: 22,
              杀伐果断: 23,
              逆袭: 24,
              青春文学: 25,
              影视原著: 26,
              悬疑: 27,
              名著: 28,
              红色文学: 29,
              文学艺术: 30,
              人文社科: 31,
              少儿教育: 32,
              经管励志: 33,
            };

            if (categoryIdMap[category]) {
              currentParams.cateids.push(categoryIdMap[category]);
            }
          }

          fetchBooks();
        });

        // 为排序标签添加点击效果
        $(".el-tabs__item").click(function () {
          $(this).addClass("is-active").siblings().removeClass("is-active");
          const sortType = $(this).attr("id").replace("tab-", "");
          // 根据不同的排序类型设置orderBy参数
          switch (sortType) {
            case "hots":
              currentParams.orderBy = "hots";
              break;
            case "likes":
              currentParams.orderBy = "likes";
              break;
            case "comments":
              currentParams.orderBy = "comments";
              break;
          }
          fetchBooks();
        });

        // 分页按钮点击事件
        $(".el-pager li").click(function () {
          if ($(this).hasClass("active")) return;
          $(".el-pager li").removeClass("active");
          $(this).addClass("active");
          currentParams.page = parseInt($(this).text());
          fetchBooks();
        });

        // 上一页按钮点击事件
        $(".btn-prev").click(function () {
          if ($(this).prop("disabled")) return;
          const currentPage = $(".el-pager li.active").text();
          if (currentPage > 1) {
            currentParams.page = parseInt(currentPage) - 1;
            updatePagination();
            fetchBooks();
          }
        });

        // 下一页按钮点击事件
        $(".btn-next").click(function () {
          if ($(this).prop("disabled")) return;
          const currentPage = $(".el-pager li.active").text();
          currentParams.page = parseInt(currentPage) + 1;
          updatePagination();
          fetchBooks();
        });

        // 更新分页UI
        function updatePagination() {
          const currentPage = currentParams.page;
          const $pager = $(".el-pager");
          $pager.empty();

          // 生成分页按钮
          for (let i = 1; i <= 5; i++) {
            const pageNum = currentPage + i - 3;
            if (pageNum > 0) {
              const $pageButton = $(
                `<li class="number ${
                  pageNum === currentPage ? "active" : ""
                }">${pageNum}</li>`
              );

              // 为每个分页按钮添加点击事件
              $pageButton.on("click", function () {
                if ($(this).hasClass("active")) return;

                // 移除其他按钮的active类
                $(".el-pager li").removeClass("active");
                // 添加当前按钮的active类
                $(this).addClass("active");

                // 更新当前页码
                currentParams.page = parseInt($(this).text());
                // 重新获取数据
                fetchBooks();
              });

              $pager.append($pageButton);
            }
          }

          // 更新上一页/下一页按钮状态
          $(".btn-prev").prop("disabled", currentPage === 1);
          $(".btn-next").prop("disabled", false); // 这里可以根据总页数来设置
        }

        // 获取小说列表数据
        function fetchBooks() {
          // 构建请求参数
          const requestParams = {
            ...currentParams,
            page: currentParams.page,
            pageSize: currentParams.pageSize,
            orderBy: currentParams.orderBy,
          };

          // 调用app.js中的接口
          ajaxRequest({
            url: "/api/web/libr_search",
            method: "POST",
            data: requestParams,
            headers: { Authorization: "Bearer token" },
            success: function (response) {
              if (response.code === 200) {
                renderBooks(response.data.list);
                // 更新分页信息
                updatePagination();
              } else {
                console.error("获取小说列表失败:", response.message);
              }
            },
            error: function (error) {
              console.error("请求失败:", error);
            },
          });
        }

        // 渲染小说列表
        function renderBooks(books) {
          const container = $("#hot-books-container");
          container.empty();

          books.forEach((book) => {
            const bookHtml = `
              <a href="/${book.flag}/book.html" class="item">
                <div class="flex inner">
                  <div class="imgbox">
                    <img src="${book.coverpic}" title="${
              book.title
            }" class="img-block" />
                  </div>
                  <div class="content flex-1 pt0">
                    <div class="book-title text-bold">${book.title}</div>
                    <div class="book-auth mt5 text-gray">
                      ${book.status === 1 ? "连载中" : "已完结"} · 人气${
              book.hots
            } · ${book.iswz == 2 ? "完结" : "连载"}
                    </div>
                    <div class="book-auth mt5 text-gray">
                      作者：${book.author}
                    </div>
                    <div class="book-desc mt5 text-gray">
                      ${book.desc}
                    </div>
                  </div>
                </div>
              </a>
            `;
            container.append(bookHtml);
          });
        }

        // 页面加载时获取数据
        fetchBooks();
      });
    </script>
  </body>
</html>
